<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <script src="../../../layuiadmin/jquery.min.js"></script>
    <style>
        .layui-nav-tree {
            width: 90px;
            padding: 0;
        }

        .layui-nav-tree .layui-nav-item a {
            height: 30px;
            line-height: 33px;
        }

        .layui-nav {
            border-radius: 0px;
            background-color： #4288ce;
        }

        .layui-table-cell {
            /*height: 48px;*/

        }

    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-role layuiadmin-btn-useradmin" onclick="add_cate()"
                            data-type="add">添加
                    </button>
                </div>

            </div>
        </div>

        <div class="layui-card-body">

            <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
            <script type="text/html" id="imgTpl">
                <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
            </script>
            <script type="text/html" id="LAY-user-manage">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
            <script type="text/javascript" src=""></script>
        </div>
    </div>
</div>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    function timeStamp2String(time) {
        var datetime = new Date();
        datetime.setTime(time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
        var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
        var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }
    //table 渲染
    layui.use(['table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;
        var tableIns = table.render({
            elem: '#LAY-user-manage',
            //后台api数据

            url: "category?op=table",
            cellMinWidth: 95,
            page: true,
            height: "full-125",
            limits: [10, 40, 100, 500, 1000],
            limit: 10,
            id: "LAY-user-manage",
            cols: [[
                {field: 'id', title: 'id', minWidth: 40, align: "center"},
                {field: 'name', title: '名字', minWidth: 80, align: "center"},
                {
                    field: ' ', title: '图片', minWidth: 60, height: 100, align: '', templet: function (d) {
                    return '<img height="200" width="200" src="' + d.cate_img + '" ';
                }
                },
                {field: 'str_status', title: '状态', minWidth: 80, align: "center"},
                {
                    field: '', title: '操作', minWidth: 80, align: "center", templet: function (d) {
                    if (d.status == 1) {
                        return '<a title="' + d.name + '编辑" onclick="edit(' + d.id + ',this)"  data-href="show_info?order_id=' + d.id + '" href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>'
                            + '<a title="' + d.name + '" onclick="disable(' + d.id + ',' + d.status + ',this)"  data-href="show_info?order_id=' + d.id + '" href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">禁用</a>';
                    }
                    else
                    {
                        return '<a title="' + d.name + '编辑" onclick="edit(' + d.id + ',this)"  data-href="show_info?order_id=' + d.id + '" href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>'
                            + '<a title="' + d.name + '" onclick="disable(' + d.id + ',' + d.status + ',this)"  data-href="show_info?order_id=' + d.id + '" href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs layui-bg-red" lay-event="edit">启用</a>';
                    }
                }
                }

            ]]
        });
        console.log(tableIns);
        //监听搜索
        form.on('submit(LAY-user-front-search)', function (data) {
            var field = data.field;
            console.log(field);
            //执行重载
            table.reload('LAY-user-manage', {
                url: "{:url('onlists?op=table')}",
                where: field,
                done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);
                    //得到当前页码
//                console.log(curr);
                    //得到数据总量
//                console.log(count);
                }
            });
        });

        //事件
        var active = {
            batchdel: function () {
                var checkStatus = table.checkStatus('LAY-user-manage')
                    , checkData = checkStatus.data; //得到选中的数据

                if (checkData.length === 0) {
                    return layer.msg('请选择数据');
                }

                layer.prompt({
                    formType: 1
                    , title: '敏感操作，请验证口令'
                }, function (value, index) {
                    layer.close(index);

                    layer.confirm('确定删除吗？', function (index) {

                        //执行 Ajax 后重载
                        /*
                         admin.req({
                         url: 'xxx'
                         //,……
                         });
                         */
                        table.reload('LAY-user-manage');
                        layer.msg('已删除');
                    });
                });
            }

        };

        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    function add_cate() {
        layer.open({
            type: 2
            , title: '添加类别'
            , btn: ['确定', '取消']
            , content: 'add_cate'
            , maxmin: true
            , area: ['50%', '80%']
            , yes: function () {
                var _content = $('div.layui-layer-content').children('iframe').contents();

                $.ajax({
                    type: 'GET',
                    url: "{:url('adding_cate')}",
                    data: {'name': _content.find('#name').val(), 'cate_img': _content.find('#img_name').val()},
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg('添加成功!', {
                                icon: 1,
                                time: 1000,
                                end: function () {
                                    window.location.reload();
                                }
                            });
                        } else {
                            layer.msg(data.msg, {
                                icon: 1, time: 1000, end: function () {
                                    window.location.reload();
                                }
                            });
                        }
                    }
                });
            }
            , end: function () {
                location.reload();
            }
        })
    }

    function edit(id, obj) {
        layer.open({
            type: 2
            , title: '编辑类别'
            , btn: ['确定', '取消']
            , content: 'edit_cate?id=' + id
            , maxmin: true
            , area: ['50%', '80%']
            , yes: function () {
                var _content = $('div.layui-layer-content').children('iframe').contents();

                $.ajax({
                    type: 'GET',
                    url: "{:url('editing_cate')}",
                    data: {
                        'name': _content.find('#name').val(),
                        'cate_img': _content.find('#img_name').val(),
                        'id': _content.find('#cate_id').val()
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg('修改成功!', {
                                icon: 1,
                                time: 1000,
                                end: function () {
                                    window.location.reload();
                                }
                            });
                        } else {
                            layer.msg(data.msg, {
                                icon: 1, time: 1000, end: function () {
                                    window.location.reload();
                                }
                            });
                        }
                    }
                });
            }
        })
    }

    function disable(id, obj) {

        $.ajax({
            type: 'GET',
            url: "{:url('disable')}",
            data: {'id': id},
            dataType: 'json',
            success: function (data) {
                if (data.code == 0) {
                    layer.msg('修改成功!', {
                        icon: 1,
                        time: 1000,
                        end: function () {
                            window.location.reload();
                        }
                    });
                } else {
                    layer.msg('修改失败', {
                        icon: 1, time: 1000, end: function () {
                            window.location.reload();
                        }
                    });
                }
            }
        });


    }
</script>
</body>
</html>
